<template>
    <div class="kongActiveInfo"> 
        <el-alert type="info"  show-icon>
            <h3>
                <span> 请激活Kong的管理连接，设置Kong管理连接请前往：
                    <router-link :to="{path: kongProfileUrl}">
                        <strong>
                            <el-link type="success" :underline="false"  @click.native="toKongProfile()">
                                配置中心
                            </el-link>
                        </strong>
                    </router-link>
                </span>
            </h3>
        </el-alert>
        <el-table  v-loading="loading" :data="profileList">            
            <el-table-column label="环境编码" align="center" prop="profileCode" />
            <el-table-column label="配置名称" align="center" prop="name" />
            <el-table-column label="所属环境" align="center" prop="env" />
            <el-table-column label="简称" align="center" prop="abbreviation" />
            <el-table-column label="版本号" align="center" prop="version" />
            <el-table-column label="服务器url" align="center" prop="url" />
            <el-table-column label="状态" align="center">
                <el-switch
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    active-value="ACTIVE"
                    inactive-value="STOP">
                </el-switch>
            </el-table-column>
            <el-table-column label="操作" align="center" prop="active" key="active" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.active==='ACTIVE'"
                        size="small"   
                        type="primary"
                        icon="el-icon-add"
                        round
                        @click="handleActive(scope.row)">
                        已激活
                    </el-button>
                    <el-button v-else
                        size="small"   
                        type="primary"
                        icon="el-icon-add"
                        round
                        @click="handleActive(scope.row)">
                        未激活
                    </el-button>

                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script> 
import { listProfile, getProfile,activeProfile } from "@/api/kong/profile";
export default {
  props: {
    className: {
      type: String,
      default: 'info'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data(){
      return{
          kongProfileUrl: null,
          // kong配置信息表格数据
          profileList: [],
          // 遮罩层
          loading: true,
          // 总条数
          total: 0,
          // kong profile 信息 
          kongActiveProfileInfo:{},
      }
  },
  created() {
    this.getProfileList();
  },
  mounted() { 
    //   console.log("kong 首页 界面初始化");
      this.getKongxActiveProfile();
      // 请求 kong profile 配置信息 并保存到store 中
  },
  methods:{
      // 点解 跳转到 kong 配置中心
      toKongProfile(){
        this.kongProfileUrl = "/kong/param/profile";
        setTimeout(() => {
            this.$emit("callback", {});
        }, 200);
        },
      getKongxActiveProfile(){            
        this.$store.dispatch("getKongActiveProfile").then((res) => {            
            this.kongActiveProfileInfo=res;
         });
      },
      getProfileList(){
        this.loading = true;
        listProfile(this.queryParams).then(response => {
            this.profileList = response.rows;
            this.total = response.total;
            this.loading = false;
        });
      },
      // 激活按钮事件
      handleActive(row){
        this.$confirm('确定要激活该kong 信息？',"警告",{
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
        }).then(()=>{
            // console.log(JSON.stringify(row))        
            activeProfile(JSON.stringify(row)).then(response =>{
            console.log(response);
            this.msgSuccess("激活成功")
            // 激活成功 跳转到 首页
             window.location.reload();
            });
        })
        .catch(()=>{

        })
      }

  }
    
}
</script>